<template>
  <div>
    <div v-for="item in menuListData" :key="item.id">
      <el-menu-item v-if="!item?.children?.length" :index="item.router" @click="changeMenu(item.router)">{{item.name}}</el-menu-item>
      <el-sub-menu v-else :index="item.id">
        <template #title>
          <span>{{item.name}}</span>
        </template>
        <MenuList :menuListData="item.children"></MenuList>
      </el-sub-menu>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import ElConfigProvider from 'element-plus'

export default defineComponent({
  name: 'MenuList',
  props: {
    menuListData: {
      type: Array as PropType<any[]>,
      required: true,
      default: () => [],
    },
    activeRouter: {
      type: String as PropType<string>,
    }
  },
  components: {
    [(ElConfigProvider as any).name]: ElConfigProvider
  },
  setup(props, context) {
    const changeMenu = (nowRouter: string) => {
      context.emit('changeActiveRouter', nowRouter)
    }
    return {
      changeMenu
    }
  },
})
</script>

<style scoped lang="less">
:deep(.el-menu-item-group__title){
  font-size: 20px;
  color: rgb(80, 80, 241);
}
</style>
